<script>
import HeadAssembly from "@/components/headAssembly.vue";
import CarouselComponent from "@/components/CarouselCompont.vue";
import courseComponent from "@/components/courseComponent.vue";
import smallCourse from "@/components/smallCourse.vue";
import  {getCourseList} from "@/api/http";


export default {
  name: "indexView",
  components: {
    HeadAssembly,
    CarouselComponent,
    courseComponent,
    smallCourse
  },
  data(){
    return {
      flag:true,
      com:'CarouselComponent',
      type:'free',
      obj:{
        name:'111',
        age:18
      },
      courselist:[],
      courseBoutiquelist:[],
      courseDiscountlist:[],

    }
  },
  methods:{
    getS(data){
      console.log(data)
    }
  },
  created() {
    getCourseList('free').then(res=>{
      this.courselist=res.rows
    })
    getCourseList('boutique').then(res=>{
      this.courselist=res.rows
    })
    getCourseList('discount').then(res=>{
      this.courselist=res.rows
    })

    // instance.post('https://wkt.myhope365.com/weChat/applet/course/list/type',{
    //   type:this.type,
    //   pageNum:1,
    //   pageSize:5
    // }).then(res => {
    //   if(res.code === 0){
    //     this.courselist=res.rows
    //   }
    //
    // })
  }
}
</script>

<template>
<div>
<!--  <button @click="flag=!flag">add</button>-->
<!--  <transition-->
<!--      name="custom-classes-transition"-->
<!--      enter-active-class=" animate__animated  animate__tada"-->
<!--      leave-active-class=" animate__animated  animate__bounceOutRight">-->
<!--    <HeadAssembly v-if="flag"></HeadAssembly>-->
<!--    <CarouselComponent class="swiper" v-else>-->
<!--    </CarouselComponent>-->

<!--  </transition>-->

<!--  父传子-->
  <div>
    <HeadAssembly :type1="type"></HeadAssembly>
    <HeadAssembly :object="obj"></HeadAssembly>
  </div>
<!--  子传父-->
  <div>
    <CarouselComponent class="swiper" @getSon="getS">
    </CarouselComponent>
    <component :is="com"></component>
  </div>
  <courseComponent type="free"></courseComponent>
  <courseComponent type="boutique"></courseComponent>
  <courseComponent type="discount"></courseComponent>

  <div class="box" >
    <smallCourse class="course" v-for="item in courselist" :key="item.courselist" :item="item"></smallCourse>
  </div>
  <div class="box" >
    <smallCourse class="course" v-for="item in courseBoutiquelist" :key="item.courselist" :item="item"></smallCourse>
  </div><div class="box" >
  <smallCourse class="course" v-for="item in courseDiscountlist" :key="item.courselist" :item="item"></smallCourse>
</div>

</div>
</template>

<style scoped lang="less">
.swiper{
  margin-top: -100px;
}
.box {
  width: 1200px;
  margin: auto;
  display: flex;
  justify-content: space-between;
  .course {
    width: 18%;
  }
}
</style>